<script setup lang="ts">
import { middleBottomOne } from "@/api";
import SeamlessScroll from "@/components/seamless-scroll";
import { computed, onMounted, reactive } from "vue";
import { useSettingStore } from "@/stores";
import { storeToRefs } from "pinia";
import EmptyCom from "@/components/empty-com";
import { ElMessage } from "element-plus";

const settingStore = useSettingStore();
const { defaultOption, indexConfig } = storeToRefs(settingStore);
const state = reactive<any>({
  list: [],
  defaultOption: {
    ...defaultOption.value,
    singleHeight: 259,
    limitScrollNum:4,
    step:1
  },
  scroll: true,
});

const getData = () => {
  middleBottomOne({})
    .then((res) => {

      state.list = res[0].dataList
      console.log("中下左", state.list);
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};

const comName = computed(() => {
  if (indexConfig.value.leftBottomSwiper && (state.list.length>state.defaultOption.limitScrollNum-1)) {
    return SeamlessScroll;
  } else {
    return EmptyCom;
  }
});
function handlePM(val: any) {
  // console.log(val);
  return val.toString().padStart(2, '0');
}
const handleAddress = (item: any) => {
  return `${item.provinceName}/${item.cityName}/${item.countyName}`;
};
onMounted(() => {
  getData();
});
</script>

<template>
  <div class="right_bottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !indexConfig.leftBottomSwiper }">
    <component :is="comName" :list="state.list" v-model="state.scroll" :singleHeight="state.defaultOption.singleHeight"
      :step="state.defaultOption.step" :limitScrollNum="5 || state.defaultOption.limitScrollNum"
      :hover="state.defaultOption.hover" :singleWaitTime="state.defaultOption.singleWaitTime"
      :wheel="state.defaultOption.wheel">
      <ul class="right_bottom">
        <li class="right_center_item" v-for="(item, i) in state.list" :key="i">
          <div class="inner_right">
            <div class="inner_right-top">
              <div class="inner_right-top-place">
                <div>{{item.unit}}</div>
                <div>{{item.total}}</div>
              </div>
              <div class="inner_right-top-pm">{{ handlePM(i + 1) }}</div>
            </div>

            <div class="inner_right-bottom">
              <div :style="`width: ${100};`"></div>
            </div>
          </div>
        </li>
      </ul>
    </component>
  </div>
</template>

<style scoped lang="scss">
.right_bottom {
  width: 100%;
  height: 100%;

  .right_center_item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 10px;
    font-size: 14px;
    color: #fff;

    .orderNum {
      margin: 0 20px 0 -20px;
    }

    .inner_right {
      width: 100%;

      .inner_right-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .inner_right-top-place {
          font-weight: 400;
          font-size: 16px;
          color: #FFFFFF;
          line-height: 24px;

          >div:nth-child(2) {
            font-weight: 400;
            font-size: 10px;
            color: #A4C6E6;
            line-height: 15px;
          }
        }

        .inner_right-top-pm {
          font-weight: 500;
          font-size: 22px;
          color: #076DD4;
          line-height: 33px;
        }
      }

      .inner_right-bottom {
        width: 100%;

        >div {
          height: 4px;
          width: 100%;
          background: #076DD4;
          border-radius: 2px;
        }
      }
    }

  }
}

.right_bottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 252px;
}

.overflow-y-auto {
  overflow-y: auto;
}
</style>
